<template>
  <div class="ele-body">
    <div style="display: flex; justify-content: space-between">
      <three-school @click="changeRegion"></three-school>
      <el-card shadow="never" style="width: 100%">
        <div style="display: flex; align-items: center; margin-bottom: 16px">
          <b v-if="active_name.length" style="margin: 0 16px;"> 当前位置：
            <span v-for="(v, i) in active_name" :key="i">{{ v }}{{ i == 3 ? "" : "/" }}</span>
          </b>
          <el-input size="small" clearable v-model="query.title" placeholder="请输入学校名称" style="width: 200px">
            <el-button slot="append" size="small" type="primary" icon="el-icon-search" @click="reload"></el-button>
          </el-input>
        </div>
        <!-- 数据表格 -->
        <el-table border lazy ref="table" :data="data" v-loading="loading" height="calc(100vh - 315px)">
          <el-table-column label="序号" width="55" align="center" type="index">
            <template slot-scope="scope">
                <span v-text="$setTableIndex(query.page, query.limit, scope.$index)">
                </span>
            </template>
          </el-table-column>
          <el-table-column label="学校" align="center" prop="title"/>
          <el-table-column label="省份" align="center" prop="province_name"/>
          <el-table-column label="城市" align="center" prop="city_name"/>
          <el-table-column label="区县" align="center" prop="district_name"/>
          <el-table-column label="街道" align="center" prop="streets_name"/>
          <el-table-column label="具体地址" align="center" prop="address" width="200"/>
          <el-table-column label="排序" align="center" prop="sort" width="50"/>
          <el-table-column label="创建时间" align="center" prop="create_time" width="200">
            <template slot-scope="scope">{{
                scope.row.create_time
                    ? $util.toDateString(scope.row.create_time)
                    : "暂无"
              }}
            </template>
          </el-table-column>
          <el-table-column label="BI大屏" align="center" fixed="right" width="200" :resizable="true">
            <template slot-scope="scope">
              <el-link type="text" :underline="false" @click="goToInfoCenter(scope.row.id)">数据中心
              </el-link>
              <el-link type="text" :underline="false" @click="goToPoliceCenter(scope.row.id)">报警中心
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination :total="total" :page.sync="query.page" :limit.sync="query.limit" @pagination="getData"/>
      </el-card>
    </div>
  </div>
</template>

<script>
import {
  mapGetters
} from "vuex";
import regions from "ele-admin/packages/regions";
import threeSchool from "@/components/three_schoole.vue";

export default {
  name: "SystemUser",
  components: {
    threeSchool
  },
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 省市区数据
      regions: regions,
      // 选中的省市区
      city: [],
      row_span: 20,
      loading: false, // 表格加载状态
      selection: [], // 表格选中数据
      total: 0, // 数据总数
      data: [], // 表格数据接口
      // 表格搜索条件
      query: {
        page: 1,
        limit: 20,
        province_code: "",
        city_code: "",
        district_code: "",
        streets_code: "",
        title: "",
      },
      active_name: [],
      streetsList: [],
      schoolList: []
    };
  },
  mounted() {
    this.getData();
  },
  watch: {},
  methods: {
    goToInfoCenter(id) {
      let routeData = this.$router.resolve({
        path: "/management/dataCenter/infoCenter?schoole_id=" + id
      });
      window.open(routeData.href, '_blank');
      // this.$router.push({
      //   path:'/management/dataCenter/infoCenter?schoole_id='+id
      // })
    },
    goToPoliceCenter(id) {
      let routeData = this.$router.resolve({
        path: "/management/dataCenter/policeCenter?schoole_id=" + id
      });
      window.open(routeData.href, '_blank');
      // this.$router.push({
      //   path:'/management/dataCenter/policeCenter?schoole_id='+id
      // })
    },
    changeRegion(event) {
      this.query.province_code = event.values[0];
      this.query.city_code = event.values[1];
      this.query.district_code = event.values[2];
      this.query.streets_code = event.values[3];
      this.active_name = event.labels;
      this.getData();
    },
    /* 获取表格数据 */
    getData() {
      this.loading = true;
      this.$http
          .get("/schoole/index", {
            params: this.query
          })
          .then((res) => {
            this.loading = false;
            this.total = res.data.count;
            this.data = res.data.data;
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
    },
    /* 查询数据 */
    reload() {
      this.getData();
    },
    /* 重置搜索 */
    reset() {
      this.query = {
        page: 1,
        limit: 10,
      };
      this.active_name = [];
      this.reload();
    }
  },
};
</script>

<style scoped>
.toolbar-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right_show {
  position: absolute;
  left: -15px;
  top: 2px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  background-color: #1890ff;
  border-top-right-radius: 50%;
  border-bottom-right-radius: 50%;
  width: 30px;
  color: #fff;
}
</style>
